<template>
</template>
<script lang="ts">
import * as THREE from 'three'
import { EffectComposer, OrbitControls, RenderPass, UnrealBloomPass } from 'three/examples/jsm/Addons.js';
import Stats from 'three/examples/jsm/libs/stats.module.js';
import { GLTFLoader } from 'three/examples/jsm/Addons.js';

const scene = new THREE.Scene();


const width = 800;
const height = 800;
const camera = new THREE.PerspectiveCamera(75, width / height, 10, 3000);
camera.position.set(10, 10, 10);
camera.lookAt(0, 0, 0);

const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);


const renderer = new THREE.WebGLRenderer({
    antialias: true,  // 开启抗锯齿
    powerPreference: "high-performance" // 可选：提升性能
});
renderer.setSize(width, height);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);



const stats = new Stats;
stats.showPanel(0);
document.body.appendChild(stats.dom);
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', () => {
    stats.update();
    renderer.render(scene, camera);
})

const arr = [
    new THREE.Vector3(-5, 2, 9),
    new THREE.Vector3(-1, 4, 4),
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(6, -6, 0),
    new THREE.Vector3(7, 0, 8)
]
// 三维样条曲线
const curve = new THREE.CatmullRomCurve3(arr);
const pointsArr = curve.getPoints(100); 
const geometry = new THREE.BufferGeometry();
//读取坐标数据赋值给几何体顶点
geometry.setFromPoints(pointsArr); 
// 线材质
const material = new THREE.LineBasicMaterial({
    color: 0x00fffff
});
// 线模型
const line = new THREE.Line(geometry, material);
scene.add(line);

const geometry2 = new THREE.BufferGeometry();
geometry2.setFromPoints(arr);
const material2 = new THREE.PointsMaterial({
    color: 0xff00ff,
    size: 1,
});
//点模型对象
const points = new THREE.Points(geometry2, material2);
scene.add(points);
    renderer.render(scene, camera);


    // 添加环境光（非必须）
scene.add(new THREE.AmbientLight(0xffffff, 0.2));

// 创建二次贝塞尔曲线
const start = new THREE.Vector3(-5, 0, 0);
const control = new THREE.Vector3(0, 5, 0);
const end = new THREE.Vector3(5, 0, 0);
const curve2 = new THREE.QuadraticBezierCurve3(start, control, end);

// 曲线本体（红线）
const curvePoints = curve2.getPoints(100);
const curveGeometry = new THREE.BufferGeometry().setFromPoints(curvePoints);
const curveMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });
const curveLine = new THREE.Line(curveGeometry, curveMaterial);
scene.add(curveLine);

// 创建发光小球
const glowingMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 }); // 使用 BasicMaterial，才能参与 bloom
const movingSphere = new THREE.Mesh(new THREE.SphereGeometry(0.3, 32, 32), glowingMaterial);
scene.add(movingSphere);

// 添加三个控制点球体
function createMarker(pos:THREE.Vector3, color:THREE.ColorRepresentation) {
    const geo = new THREE.SphereGeometry(0.2, 16, 16);
    const mat = new THREE.MeshStandardMaterial({ color });
    const mesh = new THREE.Mesh(geo, mat);
    mesh.position.copy(pos);
    scene.add(mesh);
}
createMarker(start, 0x00ff00);
createMarker(control, 0x0000ff);
createMarker(end, 0xff00ff);

// 🧠 设置后处理 Bloom 效果
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));

const bloomPass = new UnrealBloomPass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    1.5, // strength
    0.4, // radius
    0.85 // threshold
);
composer.addPass(bloomPass);

// 动画控制
let t = 0;
function animate() {
    requestAnimationFrame(animate);

    t += 0.005;
    if (t > 1) t = 0;

    const pos = curve2.getPoint(t);
    movingSphere.position.copy(pos);

    composer.render();
}
animate();


// // 创建二次贝塞尔曲线（3D）
// const start = new THREE.Vector3(-5, 0, 0);
// const control = new THREE.Vector3(0, 5, 0);
// const end = new THREE.Vector3(5, 0, 0);

// const curve = new THREE.QuadraticBezierCurve3(start, control, end);
// const curvePoints = curve.getPoints(100);
// const curveGeometry = new THREE.BufferGeometry().setFromPoints(curvePoints);
// const curveMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });
// const curveLine = new THREE.Line(curveGeometry, curveMaterial);
// scene.add(curveLine);

// // 创建用于显示起点、控制点、终点的小球
// function createMarker(position:THREE.Vector3Like, color = 0x00ff00) {
//     const sphereGeometry = new THREE.SphereGeometry(0.2, 16, 16);
//     const sphereMaterial = new THREE.MeshBasicMaterial({ color });
//     const marker = new THREE.Mesh(sphereGeometry, sphereMaterial);
//     marker.position.copy(position);
//     scene.add(marker);
// }
// createMarker(start, 0x00ff00);   // 起点
// createMarker(control, 0x0000ff); // 控制点
// createMarker(end, 0xffff00);     // 终点

// // 创建沿曲线移动的小球
// const movingSphereGeometry = new THREE.SphereGeometry(0.3, 16, 16);
// const movingSphereMaterial = new THREE.MeshStandardMaterial({
//     color: 0xffffff,
//     emissive: 0xffaa00,   // 自发光颜色
//     metalness: 0.5,
//     roughness: 0.3
// });
// const movingSphere = new THREE.Mesh(movingSphereGeometry, movingSphereMaterial);
// scene.add(movingSphere);

// const ambientLight = new THREE.AmbientLight(0xffffff, 1);
// scene.add(ambientLight);

// // 添加一个点光源，让小球照亮周围
// const pointLight = new THREE.PointLight(0xffffff, 100, 200); // color, intensity, distance
// scene.add(pointLight);

// // 动画循环：让球体沿曲线移动
// let t = 0;
// function animate() {
//     requestAnimationFrame(animate);

//     t += 0.01;
//     if (t > 1) t = 0;

//     const point = curve.getPoint(t);
//     movingSphere.position.copy(point);
//     pointLight.position.copy(movingSphere.position);

//     renderer.render(scene, camera);
// }
// animate();



</script>